<template>
	<view class="channel">
		<view class="channel-list" @click="onJump('/pages/news/index')">
			<view class="uni-icon uni-icon-news"></view>新闻
		</view>
		<view class="channel-list" @click="onJump('/pages/list/index')">
			<view class="uni-icon uni-icon-anime"></view>动漫
		</view>
		<view class="channel-list" @click="onJump('/pages/ep/index')">
			<view class="uni-icon uni-icon-ep"></view>剧情
		</view>
		<view class="channel-list" @click="onJump('/pages/cast/index')">
			<view class="uni-icon uni-icon-cast"></view>声优
		</view>
		<view class="channel-list" @click="onJump('/pages/role/index')">
			<view class="uni-icon uni-icon-role"></view>角色
		</view>
		<view class="channel-list" @click="onJump('/pages/top/index')">
			<view class="uni-icon uni-icon-top"></view>排行
		</view>
		<view class="channel-list" @click="onJump('/pages/new/index')">
			<view class="uni-icon uni-icon-new"></view>更新
		</view>
		<view class="channel-list" @click="onJump('/pages/month/index?month=' + getCurMonth)">
			<view class="uni-icon uni-icon-month"></view>每月新番
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			onJump(url) {
				uni.navigateTo({
					url
				})
			},
		},
		computed: {
			// 判断为几月新番
			getCurMonth() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				let m = '10'
				if (month >= 1 && month < 4) {
					m = '01'
				} else if (month >= 4 && month < 7) {
					m = '04'
				} else if (month >= 7 && month < 10) {
					m = '07'
				}
				return year + m
			}
		}
	}
</script>

<style lang="scss" scoped>
	.channel {
		display: flex;
		flex-wrap: wrap;

		&-list {
			margin-top: 50rpx;
			width: 25%;
			text-align: center;
			font-size: 36rpx;

			.uni-icon {
				display: block;
				margin-bottom: 20rpx;
				&:before {
					font-size: 48rpx;
				}
			}
		}
	}
</style>
